<template>
	<view class="">
		<view class="dk">
			<view class="box_8 flex-row justify-between">
				<view class="dk-wrap">

					<view class="box_9 flex-row" :class="dkIndex==index?'activeDk':''"
						v-for="(item,index) in dataInfo.areaList" @click="dkBtn(item,index)" :key="index">
						<view class="text-group_1 flex-col" :class="item.isFull==true?'over':''">
							<text class="text_16">{{item.areaName}}</text>
							<text class="text_17" v-if="item.isFull">售罄</text>
						</view>
					</view>
				</view>

			</view>
			<view class="box_10">
				<view class="text_20" @click="lookDk">
					{{islookDk==true?'收起':'查看地块分布'}}
				</view>
				<!-- v-if="islookDk==true" -->
				<view class="dkLook" v-if="islookDk==true">

					<image v-for="(item,index) in dkData.imageList" :src="item" mode=""></image>
					<!-- <view class="" >
					
					
				</view> -->

				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		getOrderDetail
	} from '@/api/order.js';
	export default {
		data() {
			return {
				dataInfo: {},
				id: "",
				dkData: {},
				islookDk: false,
				dkIndex: 0,
			}
		},
		onLoad(e) {
			this.id = e.orderId
			this.init()
		},
		methods: {

			init() {
				getOrderDetail(this.id).then(res => {
					this.dataInfo = res.data
					// this.allPrice = this.dataInfo.price
					// this.dkData = this.dataInfo.areaList[0]
				})

			},
			lookDk() {
				this.islookDk = !this.islookDk
			},
			dkBtn(item, index) {
				if (item.isFull == true) {
					uni.showToast({
						title: "该地块已售罄,请选择其他地块",
						icon: 'none'
					})
				} else {
					this.islookDk = false
					this.dkIndex = index
					this.dkData = item
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../com/pay.css';
	@import '@/com/css/common.css';

	.activeDk {
		background: $maincolor;
		color: #fff !important;
	}

	.dk {
		padding: 30rpx;
		background: #fff;

		.dkLook {
			height: 600rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.dk-wrap {
			width: 640rpx;
			display: flex;
			margin: 0 auto;
			overflow-x: scroll;

		}
	}
</style>